<template>
  <el-form :inline="true" :model="formInline" class="demo-form-inline">
    <el-form-item label="部门">
      <el-input v-model="formInline.name" placeholder="角色姓名"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="onSubmit">查询</el-button>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="onAdd">添加</el-button>
    </el-form-item>
  </el-form>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="id" label="角色编号" />
    <el-table-column prop="name" label="角色姓名"/>
    <el-table-column prop="sn" label="角色描述"/>
    <el-table-column label="操作">
      <template #default="scope">
        <el-button size="small" @click="handleEdit(scope.$index, scope.row)"
        >编辑</el-button
        >
        <el-button
            size="small"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
        >删除</el-button
        >
      </template>
    </el-table-column>
  </el-table>
  <div class="demo-pagination-block">
    <el-pagination
        v-model:currentPage="currentPage4"
        v-model:page-size="pageSize4"
        :page-sizes="[5,10,20,50]"
        :small="small"
        :disabled="disabled"
        :background="background"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
    >
    </el-pagination>
  </div>
  <el-dialog v-model="dialogFormVisible" title="添加和编辑部门">
    <el-form :model="form">
      <input type="hidden" v-model="form.id">
      <el-form-item label="角色名称" :label-width="formLabelWidth">
        <el-input v-model="form.name" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="角色描述" :label-width="formLabelWidth">
        <el-input v-model="form.sn" autocomplete="off"></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="dialogSave"
        >保存</el-button
        >
      </span>
    </template>
  </el-dialog>
</template>

<script>
// location.reload()
import {ref, reactive, onMounted} from 'vue'
import {ElMessage, ElMessageBox} from "element-plus";
import {add, deleted, loadAll, update} from "../../api/role";

export default {
	name: 'role',
	setup() {
    const onSubmit = () => {
      loadAll({
        "currentPage":currentPage4.value,
        "pageSize":pageSize4.value,
        'name':formInline.name
      }).then(res=>{
        tableData.value = res.data.list
        total.value = res.data.total
      })
    }
    const onAdd = () => {
      form.id = null
      form.name = null
      form.sn = null
      dialogFormVisible.value = true
    }
    const formInline = reactive({
      name: '',
    })
    const total = ref(5)
    const dialogFormVisible = ref(false)
    const form = reactive({
      id: '',
      name: '',
      sn: ''
    })
    const dialogSave = () => {
      dialogFormVisible.value = false
      if(form.id!=null){
        update({
          'id': form.id,
          'name': form.name,
          'sn': form.sn
        }).then(res=>{
          console.log(res.success)
          if(res.success){
            ElMessage({
              type: 'success',
              message: '修改成功',
            })
          }else{
            ElMessage({
              type: 'error',
              message: '修改失败',
            })
          }
        })
      }else {
        add({
          'name': form.name,
          'sn': form.sn
        }).then(res=>{
          if(res.success){
            loadAll(
                {
                  "currentPage":currentPage4.value,
                  "pageSize":pageSize4.value,
                }
            ).then(res=>{
              tableData.value = res.data.list
              total.value = res.data.total
            })
            ElMessage({
              type: 'success',
              message: '添加成功',
            })
          }else {
            ElMessage({
              type: 'error',
              message: '添加失败',
            })
          }
        })
      }

    }
    const tableData = ref('')
    const currentPage4 = ref(1)
    const pageSize4 = ref(5)
    const small = ref(false)
    const background = ref(false)
    const disabled = ref(false)
    const handleEdit = (index, row) => {
      form.id = row.id
      form.name = row.name
      form.sn = row.sn
      dialogFormVisible.value = true
    }
    const handleDelete = (index, row) => {
      open(index,row)
    }
    const handleSizeChange = (val) => {
      loadAll({
        "currentPage":currentPage4.value,
        "pageSize":val,
        'name':formInline.name,
      }).then(
          res=>{
            tableData.value = res.data.list
            total.value = res.data.total
          }
      )
    }
    const handleCurrentChange = (val) => {
      loadAll({
        "currentPage":val,
        "pageSize":pageSize4.value,
        'name':formInline.name,
      }).then(
          res=>{
            tableData.value = res.data.list
            total.value = res.data.total
          }
      )
    }
    const open = (index,row) => {
      ElMessageBox.confirm(
          '您确定要删除此条数据吗',
          'Warning',
          {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
          }
      ).then(() => {
        deleted(row.id).then(res=>{
          if(res.success){
            loadAll({
              "currentPage":currentPage4.value,
              "pageSize":pageSize4.value,
            }).then(
                res=>{
                  tableData.value = res.data.list
                  total.value = res.data.total
                }
            )
            ElMessage({
              type: 'success',
              message: '删除成功',
            })
          }else {
            ElMessage({
              type: 'error',
              message: '删除失败',
            })
          }
        })
      })
          .catch(() => {
            ElMessage({
              type: 'info',
              message: '取消删除',
            })
          })
    }
    onMounted(()=>{
      loadAll(
          {
            "currentPage":currentPage4.value,
            "pageSize":pageSize4.value,
          }
      ).then(res=>{
        tableData.value = res.data.list
        total.value = res.data.total
      })
    })
    return {
      handleEdit,
      handleDelete,
      form,
      dialogSave,
      dialogFormVisible,
      tableData,
      small,
      background,
      disabled,
      currentPage4,
      pageSize4,
      total,
      handleSizeChange,
      handleCurrentChange,
      formInline,
      onSubmit,
      onAdd
    }
	}
}
</script>
